<article class="component" id="panel" data-url='panels'>
  <h2 class="component-title">Side Panels</h2>
  <p class="component-description">Side panel is on left or right side of page, and you can swipe-left-to-right or swipe-right-to-left to open it. </p>

  <h3>How to use</h3>
  <p>Add <code>.open-panel</code> To any link to make it a button which can open a side panel. You can add <code>data-panel='{panel's css selector}'</code> to spcify which panel to open, if you have more than one panel.</p>
  <p>Add <code>.close-panel</code> to any link to make it a close button which can close a panel. You have not need to spcify which panel to close, because only one panel can be opened at the same time.</p>
  <p>Use <code>.panel-left</code> or <code>.panel-right</code> to spcify left panel or right panel.</p>
  <p>Use <code>.panel-cover</code> or <code>.panel-reveal</code> to spcify then type of panel.</p>

  <h3>Config</h3>
  <p>The panel can be opened and closed by slide gestures by default.</p>
  <p>You can set <code>$.config.swipePanel</code> and <code>$.config.swipePanelOnlyClose</code> to enable or disable the slide gestures in <a href='#init'>init config</a></p>.
  <div class="component-example component-example-fullbleed">
  </div>
{% highlight html %}
<div class="page">
  <header class="bar bar-nav">
    <h1 class='title'>Side Panel</h1>
  </header>
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="button button-fill open-panel" data-panel='#panel-left-demo'>Open left side panel</a></p>
    </div>
  </div>
</div>
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal theme-dark" id='panel-left-demo'>
  <div class="content-block">
    <p>This is a side panel</p>
    <p></p>
    <p><a href="#" class="close-panel">Close</a></p>
  </div>
  <div class="list-block">
    <!-- .... -->
  </div>
</div>
<div class="panel panel-right panel-reveal">
  <div class="content-block">
    <p>This is a side panel</p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">Close</a></p>
  </div>
</div>
{% endhighlight %}

  <h3 class="component-title">Use JavaScript</h3>
  <p class="component-description">We can also open and close Panels with JavaScript, for this we need to look at related App methods: <code>$.openPanel(panel)</code> and <code>$.closePanel()</code></p>

  <ul>
    <li>
      <code>$.openPanel(panel)</code> Open a panel.
    </li>
    <li>
      <code>$.closePanel()</code>:close currently opened Panel.
    </li>
  </ul>
  <div class="component-example component-example-fullbleed">
    <script>
      $(document).on("click", ".my-btn", function() {
        $.openPanel("#panel-js-demo");
      });
    </script>
  </div>
{% highlight html %}
<div class="page">
  <header class="bar bar-nav">
    <h1 class='title'>Panel</h1>
  </header>
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="button button-fill my-btn">Open Panel with JS</a></p>
    </div>
  </div>
</div>
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-right panel-cover theme-dark" id='panel-js-demo'>
  <div class="content-block">
    <p>I am on the right</p>
    <p>I cover the page</p>
    <p></p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">Close</a></p>
  </div>
</div>
<div class="panel panel-right panel-reveal">
  <div class="content-block">
    <p>I am a Panel</p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">Close</a></p>
  </div>
</div>
{% endhighlight %}
{% highlight js %}
$(document).on("click", ".my-btn", function() {
  $.openPanel("#panel-js-demo");
});
{% endhighlight %}

  <h3>Events</h3>
  <p>Events will triggered on <code>.panel</code> when open or close.</p>
  <table class="events-table">
    <thead>
      <tr>
        <th>Event</th>
        <th>Target</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>open</td>
        <td>Panel Element<span>&lt;div class="panel"&gt;</span></td>
        <td>Event will be triggered when Panel starts its opening animation</td>
      </tr>
      <tr>
        <td>opened</td>
        <td>Panel Element<span>&lt;div class="panel"&gt;</span></td>
        <td>Event will be triggered after Panel completes its opening animation</td>
      </tr>
      <tr>
        <td>close</td>
        <td>Panel Element<span>&lt;div class="panel"&gt;</span></td>
        <td>Event will be triggered when Panel starts its closing animation</td>
      </tr>
      <tr>
        <td>closed</td>
        <td>Panel Element<span>&lt;div class="panel"&gt;</span></td>
        <td>Event will be triggered after Panel completes its closing animation</td>
      </tr>
    </tbody>
  </table>
</article>
